<template>
	<view>
		<view class="container">
			<view :class='["list-item", item.isConfirm == 1 ? "confirmed superWidth": "unconfirmed"]' v-for="(item, index) in listData"
			 :key="index" :style="{ transform: 'translate3d(' + item.slide_x + 'px, 0, 0)' }">
				<view class="slide-list" @touchstart="touchStart($event, index)" @touchend="touchEnd($event, index)"
				 @touchmove="touchMove($event, index)" @tap="recover(index)" v-if="item.isConfirm == 1">
					<view class="content" hover-class="uni-item--hover" :style="{ width: windowWidth + 'px' }" @click="clickItemMethod(item)">
						<view class="list-item-title">
							<view class="item-left">
								<image :src="notConfirmIcon" v-if="item.isConfirm == 0"></image>
								<image :src="confirmIcon" v-if="item.isConfirm == 1"></image>
								<view class="title">告警发生</view>
							</view>
							<view class="time">{{item.time}}</view>
						</view>
						<view class="info">
							<text class="name">{{item.name}}</text>
							<text class="desc">{{item.desc}}</text>
							<text class="percentage">{{item.percentage}}</text>
							<view class="control">
								<button type="default" v-if="item.isConfirm == 0" style="background-color: #ff6b6b;">确认</button>
								<button type="default" class="confirmed" v-if="item.isConfirm == 1">已确认</button>
							</view>
						</view>
					</view>
				</view>
				<view class="group-btn" v-if="item.isConfirm == 1" @click="clickMethod(item, index)">
					<image :src="deleteIcon"></image>
					<p>删除</p>
					<!-- <view class="btn-div" v-for="(value, key) in button" :key="key" @click="clickMethod(item, value, index)">{{value.title}}</view> -->
				</view>
				<view class="slide-list" v-else @touchstart="touchStart($event, index)" @touchend="touchEnd($event, index)" @tap="recover(index)">
					<view class="content" hover-class="uni-item--hover" :style="{ width: windowWidth + 'px' }">
						<view class="list-item-title">
							<view class="item-left">
								<image :src="notConfirmIcon" v-if="item.isConfirm == 0"></image>
								<image :src="confirmIcon" v-if="item.isConfirm == 1"></image>
								<view class="title">告警发生</view>
							</view>
							<view class="time">{{item.time}}</view>
						</view>
						<view class="info">
							<text class="name">{{item.name}}</text>
							<text class="desc">{{item.desc}}</text>
							<text class="percentage">{{item.percentage}}</text>
							<view class="control">
								<button type="default" v-if="item.isConfirm == 0" style="background-color: #ff6b6b;">确认</button>
								<button type="default" class="confirmed" v-if="item.isConfirm == 1">已确认</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * m-slide-list 滑动操作列表
	 * @description 滑动操作列表组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=209
	 * @property {Array} list 数据源，格式为：[{title: 'xxx', image:'xxx', surname: 'xxx',detail:'xxx', rightDetail: 'xxx', slide_x: 0},{title: 'xxx', image:'xxx', surname: 'xxx',detail:'xxx', rightDetail: 'xxx', slide_x: 0}]
	 * @property {Array} button 按钮数据源，格式为：[{title: 'xxx', background:'xxx'},{title: 'xxx', background:'xxx'}]
	 * @property {Boolean} border 边框
	 */
	export default {
		name: 'mark-slide-list',
		props: {
			list: { //数据list
				type: Array,
				default () {
					return [];
				}
			},
			button: { //按钮数据list
				type: Array,
				default () {
					return [];
				}
			},
			border: { //边框
				type: Boolean,
				default: false
			}
		},
		computed: {
			windowWidth() {
				return uni.getSystemInfoSync().windowWidth - 48;
			}
		},
		data() {
			return {
				listData: [],
				start_slide_x: 0,
				btnWidth: 0,
				startX: 0,
				LastX: 0,
				startTime: 0,
				itemIndex: 0,
				notConfirmIcon: '../../static/image/index/notConfirm.png',
				confirmIcon: '../../static/image/index/confirmed.png',
				deleteIcon: '../../static/image/index/delete-icon.png'
			};
		},
		mounted() {
			this.listData = this.clone(this.list)
		},
		watch: {
			list: {
				handler: function(val, oldval) {
					this.listData = this.clone(this.list)
				},
				deep: true
			}
		},
		methods: {
			clone(data) {
				const type = typeof data
				let obj;
				if (type === 'array') {
					obj = [];
				} else if (type === 'object') {
					obj = {};
				} else {
					// 不再具有下一层次
					return data;
				}
				if (type === 'array') {
					for (let i = 0, len = data.length; i < len; i++) {
						obj.push(this.clone(data[i]));
					}
				} else if (type === 'object') {
					// 对原型上的方法也拷贝了....
					for (const key in data) {
						obj[key] = this.clone(data[key]);
					}
				}
				return obj;
			},

			// 滑动开始
			touchStart(e, index) {
				if (this.itemIndex == index) {
					this.itemIndex = index
				}
				//记录手指放上去的时间
				this.startTime = e.timeStamp;
				//记录滑块的初始位置
				this.start_slide_x = this.listData[index].slide_x;
				// 按钮宽度
				//#ifdef MP-WEIXIN
				uni.createSelectorQuery().in(this).selectAll('.group-btn').boundingClientRect(res => {
					if (res != null || res.lengh > 0) {
						// this.btnWidth = res[index].width * -1;
						this.btnWidth = res[0].width * -1;
					}
				}).exec();
				//#endif
				//#ifdef H5 || APP-PLUS
				uni.createSelectorQuery()
					.selectAll('.group-btn')
					.boundingClientRect()
					.exec(res => {
						if (res[0] != null) {
							this.btnWidth = res[0][index].width * -1;
						}
					});
				//#endif
				// 记录上一次开始时手指所处位置
				this.startX = e.touches[0].pageX;
				// 记录上一次手指位置
				this.lastX = this.startX;
				//初始化非当前滑动消息列的位置			
				for (var i in this.listData) {
					if (index != i) {
						this.listData[i].slide_x = 0;
					}
				}
			},
			// 滑动中
			touchMove(e, index) {
				const endX = e.touches[0].pageX;
				const distance = endX - this.lastX;
				// 预测滑块所处位置
				const duang = this.listData[index].slide_x + distance;
				// 如果在可行区域内
				if (duang <= 0 && duang >= this.btnWidth) {
					this.listData[index].slide_x = duang;
				}
				// 此处手指所处位置将成为下次手指移动时的上一次位置
				this.lastX = endX;
			},
			// 滑动结束
			touchEnd(e, index) {
				let distance = 10;
				// let distance = 100;
				const endTime = e.timeStamp;
				const x_end_distance = this.startX - this.lastX;
				if (Math.abs(endTime - this.startTime) > 200) {
					distance = this.btnWidth / -2;
				}
				// 判断手指最终位置与手指开始位置的位置差距
				if (x_end_distance > distance) {
					this.listData[index].slide_x = this.btnWidth;

				} else if (x_end_distance < distance * -1) {
					this.listData[index].slide_x = 0;
				} else {
					this.listData[index].slide_x = this.start_slide_x;
				}
			},
			// 点击回复原状
			recover(index) {
				this.listData[index].slide_x = 0;
			},
			/** 
			 * 点击按钮触发事件
			 * @param {Object} item 列表数据 
			 * @param {Object} buttonItem 按钮数据
			 * @param {Object} index 列表数据key
			 */

			// clickMethod(item, buttonItem, index) {
			// 	this.$emit("change", item, buttonItem, index)
			// },
			// 删除按钮
			clickMethod(item, index) {
				this.$emit("change", item, index)
			},

			/**
			 * 点击按钮触发事件
			 * @param {Object} item 列表数据 
			 */
			clickItemMethod(item) {
				this.$emit("click", item)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		// padding: 20rpx 0;
		overflow: hidden;
		.unconfirmed {
			color: #FF7547;
			background: #fff2f0;
			border-left: 6rpx solid #FF6B6B;
		}

		.confirmed {
			border-left: 6rpx solid #86BC42;
			background: #F8FCED;
			color: #666;
		}

		.list-item {
			height: 164rpx;
			// padding: 20rpx 0;
			display: flex;
			flex-direction: row;
			// align-items: center;
			margin-bottom: 15rpx;
			border-radius: 6rpx;
			position: relative;
			// float: left;
			&.superWidth {
				width: calc(100% + 186rpx);
			}

			.slide-list {
				// display: flex;
				display: inline-block;
				// position: relative;
				transition: all 100ms;
				transition-timing-function: ease-out;
				// min-width: 200%;
				height: 160rpx;
				float: left;
				.content {
					transition: all 100ms;
					transition-timing-function: ease-out;
					width: 100%;
					margin-top: 20rpx;
					position: relative;
					// box-sizing: border-box;
					float: left;
					clear: both;

					.list-item-title {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin-left: 24rpx;

						// 左侧图标+标题
						.item-left {
							display: flex;
							flex-direction: row;
							align-items: center;
							font-size: 24rpx;
							image {
								width: 28rpx;
								height: 28rpx;
								margin-right: 8rpx;
							}
						}

						// 右侧时间
						.time {
							margin-right: 24rpx;
							font-weight: 400;
							color: #666;
							font-size: 22rpx;
						}
					}

					.info {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin-left: 24rpx;
						font-size: 32rpx;
						margin-top: 30rpx;
						font-weight: bold;

						.control {
							margin-right: 24rpx;

							button {
								padding: 0;
								line-height: 48rpx;
								font-size: 28rpx;
								color: #fff;
								width: 120rpx;
								height: 52rpx;
								border-radius: 26rpx;

								&.confirmed {
									color: #86BC42;
									border: 2rpx solid #86bc42;
								}
							}
						}
					}
				}

				// 左滑删除样式
				.uni-item--hover {
					background-color: #f1f1f1 !important;
				}

				.now-message-info {
					position: relative;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					/* justify-content: space-between; */
					font-size: 16px;
					clear: both;
					height: 160rpx;
					padding: 0 30rpx;
					background: #ffffff;
					float: left;
				}
			}

			.group-btn {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100%;
				width: 180rpx;
				// right: 0;
				min-width: 100rpx;
				position: relative;
				margin: 0 auto;
				color: #fff;
				font-size: 32rpx;
				background: #ff6b6b;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		// }
	}
</style>
